<template>
  <div class="mainBox">
    <a-form :form="form" @submit="handleSubmit" autoComplete="off">
      <a-row>
        <a-col :span="24"
          ><a-form-item label="内容">
            <Editorbar
              ref="editor"
              :disabled="true"
              v-model="content"
              placeholder="请输入宣传语"
              style="width: 100%"
            ></Editorbar>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="footBtn">
      <span v-if="!isEdit">
        <a-button
          type="primary"
          @click="editAdd"
          style="margin-right: 24px"
        >
          {{ isHave ? "修改" : "新增" }}
        </a-button>
      </span>
      <a-button
        v-else
        type="primary"
        @click="handleSubmit"
        style="margin-right: 24px"
      >
        提交
      </a-button>
      <a-button @click="handleCancel" style="margin-right: 24px" v-if="isEdit"
        >取消
      </a-button>
      <span v-if="isHave">
        <a-button
          type="danger"
          @click="handleDelete"
          >删除</a-button
        >
      </span>
    </div>
  </div>
</template>

<script>
import Editorbar from "../../components/WangEditor";
import { postAction, getAction, deleteAction, putAction } from '../../http/manage'
export default {
  components: {
    Editorbar,
  },
  data () {
    return {
      tableData: '',
      content: '',
      isEdit: false,
      isHave: true,

      statusVideo: this.$store.state.status,
      imgStatus: this.$store.state.imgStatus,

      form: this.$form.createForm(this),

      url: {
        list: '/illegalInfoExemption/illegalInfoExemptionSelect',
        addList: '/illegalInfoExemption/illegalInfoExemptionAdd',
        editList: '/illegalInfoExemption/illegalInfoExemptionUpdate',
        deleteList: '/illegalInfoExemption/illegalInfoExemptionDelete/'
      }
    }
  },
  inject: ['reload'],
  mounted () {
    this.getList()
    if(this.isHave == true){
    this.$refs.editor.disableEditor()
    }
  },
  watch: {
    '$store.state.status' () {
      this.statusVideo = this.$store.state.status
    },
    '$store.state.imgStatus' () {
      this.imgStatus = this.$store.state.imgStatus
    }
  },
  methods: {
    getList () {
      getAction(this.url.list).then(res => {
        if (res.data.code === 0) {
          this.tableData = res.data.data
          this.isHave = this.tableData.content ? true : false
          this.content = this.tableData.content
        }
      })
    },
    editAdd () {
      this.$refs.editor.enableEditor()
      this.isEdit = true
    },
    //取消
    handleCancel () {
      this.isEdit = false
      this.$refs.editor.disableEditor()
      this.reload()
    },
    //删除
    handleDelete () {
      deleteAction(this.url.deleteList + this.tableData.id).then(res => {
        if (res.data.code == 0) {
          this.$message.success('删除成功')
          this.isEdit = false
          this.isHave = true
          this.$refs.editor.disableEditor()
          this.reload()
        }
      }).catch(() => { })
    },
    //提交
    handleSubmit (e) {
      if (this.content == "" || this.content == null) {
        this.$message.warning('请输入内容！')
      } else if (this.statusVideo == false) {
        this.$message.warning('富文本视频上传中，稍后再试！')
      } else if (this.imgStatus == false) {
        this.$message.warning('富文本图片上传中，稍后再试！')
      } else {
        if (this.isHave) {
          var params = {
            content: this.content,
            id: this.tableData.id
          }
          putAction(this.url.editList, params).then(res => {
            if (res.data.code == 0) {
              this.$message.success('修改成功')
              this.isEdit = false
              this.isHave = true
              this.$refs.editor.disableEditor()
              this.reload()
            }
          }).catch(() => { })
        } else {
          var params = {
            content: this.content,
          }
          postAction(this.url.addList, params).then(res => {
            if (res.data.code == 0) {
              this.$message.success('新增成功')
              this.isEdit = false
              this.isHave = true
              this.$refs.editor.disableEditor()
              this.reload()
            }
          }).catch(() => { })
        }

      }
    },
  }
}
</script>

<style scoped>
.mainBox {
  background-color: #fff;
  padding: 24px;
  border-radius: 4px;
border: 1px solid rgba(229, 236, 237, 1);
  box-shadow: 0px 11px 14px -10px rgba(229, 236, 237, 1);
}
.mainBox /deep/ .text {
  height: 500px;
}
</style>